<template>
  <div class="talents-poritait-wrap">
    <div class="talents-poritait-banner"></div>
    <div class="margin-align">
      <!-- 岗位画像/Java高级工程师 -->
      <div class="portait">
        <div class="detail-main-title">岗位画像/Java高级工程师</div>
        <div id="echart" class="portait-echarts"></div>
      </div>
      <!-- 推荐课程 -->
      <div class="recommend-course">
        <div class="detail-main-title">推荐课程</div>
        <div class="inline-block third-show">
          <VueSlickCarousel :arrows="false" :dots="false" :slidesToShow="5" :rows="1" :autoplay="true" :slidesToScroll="1" :draggable="true" @click="goCourseDetail(item.rData)">
            <div class="course-item content-content" v-for="item in courseDirectionList[1].courseList" :key="item.title" @click="goCourseDetail(item.rData)">
              <div class="course-pic">
                <img :src="item.imgUrl">
              </div>
              <div class="course-info course-info-vertical">
                <div class="course-top">
                  <div class="course-title">{{item.title}}</div>
                  <div class="course-intro">{{item.intro}}</div>
                </div>
                <div class="course-label-total">
                  <div class="course-label" v-for="label in item.labelList" :key="label">{{label}}</div>
                </div>
              </div>
            </div>
          </VueSlickCarousel>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import VueSlickCarousel from 'vue-slick-carousel'
import 'vue-slick-carousel/dist/vue-slick-carousel.css'
import talents from '@/api/talents'
export default {
  layout: 'teach',
  data () {
    return {
      courseDirectionList: talents.courseDirectionList,
      talentsPoritaitEchart: talents.talentsPoritaitEchart
    }
  },
  components: { VueSlickCarousel },
  mounted () {
    this.echart()
  },
  methods: {
    // 岗位画像生成
    echart () {
      let myChart = this.$echarts.init(document.getElementById('echart'))
      let that = this
      myChart.setOption({
          tooltip: {},
          // legend: [{
          //     data: that.talentsPoritaitEchart.categories.map(function (a) {
          //         return a.name;
          //     })
          // }],
          series: [
              {
                  name: 'Les Miserables',
                  type: 'graph',
                  layout: 'force',
                  data: that.talentsPoritaitEchart.nodes,
                  links: that.talentsPoritaitEchart.links,
                  categories: that.talentsPoritaitEchart.categories,
                  roam: true,
                  label: {
                      show: true,
                      position: 'right',
                      formatter: '{b}'
                  },
                  labelLayout: {
                      hideOverlap: true
                  },
                  scaleLimit: {
                      min: 0.4,
                      max: 2
                  },
                  lineStyle: {
                      color: 'source',
                      curveness: 0.3
                  },
                  force : { //力引导图基本配置
                    //initLayout: ,//力引导的初始化布局，默认使用xy轴的标点
                    repulsion : 100,//节点之间的斥力因子。支持数组表达斥力范围，值越大斥力越大。
                    gravity : 0.03,//节点受到的向中心的引力因子。该值越大节点越往中心点靠拢。
                    edgeLength :80,//边的两个节点之间的距离，这个距离也会受 repulsion。[10, 50] 。值越小则长度越长
                    layoutAnimation : true
                    //因为力引导布局会在多次迭代后才会稳定，这个参数决定是否显示布局的迭代动画，在浏览器端节点数据较多（>100）的时候不建议关闭，布局过程会造成浏览器假死。                         
                  },
              }
          ]
      })  
    },
    // 跳转到课程详情
    goCourseDetail (rData) {
      let url = 'https://edu.gxj.xm.gov.cn/auth-login?r=' + rData
      window.open(url,'_blank')
    }
  }
}
</script>
<style lang="stylus" scoped>
.talents-poritait-wrap {
  padding-bottom: 60px;
  background-color: #F6F6F6
  .talents-poritait-banner {
    background: url('/img/talents/company/banner.png') no-repeat center;
    height: 303px;
    background-color: #4575fe;
  }
  .portait {
    background: #FFFFFF;
    border-radius: 16px;
    margin-top:30px;
    padding-bottom: 20px
    .portait-echarts {
      background: #D8D8D8;
      height: 478px;
      margin: 0 20px
    }
  }
  .recommend-course {
    background: #FFFFFF;
    border-radius: 16px;
    margin-top:30px;
    .third-show {
      margin: 0 20px;
      padding-bottom: 10px;
      /deep/ .slick-list {
        width: 1180px;
        height: 310px;
      }
      .course-pic {
        border-radius: 8px 8px 0 0;
        img {
          border-radius: 8px 8px 0 0;
        } 
      }
    }
    .content-content {
      display: inline-block;
      width: 216px;
      margin-right: 20px;
      .course-title {
        width: 100%;
        margin-top: 20px
      }
      .course-intro {
        width: 100%;
        margin-top: 15px
      }
    }
  }
}
</style>